<!DOCTYPE html>
<html>
<head>

	<!--
	// Glamourswitch
	// Created by Martijn Grul
	// 2012
	-->
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Glamourswitch</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/skeleton.css">
	<link rel="stylesheet" href="css/layout.css">

	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>

<body>

	<section id="home">

		<div class="container">

			<nav>
				<ul>
					<li><a href="#home" class="button">home</a></li>
					<li><a href="#hoe-werkt-het" class="button">hoe werkt het</a></li>
					<li><a href="#over-glamourswitch" class="button">over glamourswitch</a></li>
				</ul>
			</nav>

			<div class="seven columns">
				<div id="logo" class="row"><img src="img/logo.png" alt="Glamourswitch" height="85" width="201"></div>
				<div class="row">
					<div class="six columns">
						<h2>Ondek nieuwe beauty producten</h2>
						<p>
							Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Duis sagittis tellus id eros dictum volutpat. 
							Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus accumsan porta.
						</p>
						<p> 
							Donec sit amet purus vestibulum nisi vehicula volutpat eu vel mi. In consequat est non sem scelerisque at 
							imperdiet nunc consectetur. 
						</p>
					</div>
					<div class="six columns">
						<a href="https://www.facebook.com/GlamourSwitch" target="_blank"><img src="img/icons/facebook.png" width="32" height="32" alt="Glamourswitch op Facebook"></a>
						<a href="https://twitter.com/Glamourswitch" target="_blank"><img src="img/icons/twitter.png" width="32" height="32" alt="Glamourswitch op Twitter"></a>
					</div>
				</div>
			</div>
			<div class="nine columns">
				<div id="video-header" class="row">
					<div id="lady" class="four columns"></div>
					<div id="social-bar" class="six columns">

						<iframe src="http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FGlamourSwitch&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=364066803631467" style="border:none; overflow:hidden; width:80px; height:21px; float:right;"></iframe>

						<a href="https://twitter.com/GlamourSwitch" class="twitter-follow-button" data-show-count="false" data-lang="nl">@GlamourSwitch volgen</a>
						<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
					
					</div>
				</div>
				<iframe id="youtube" width="475" height="265" src="http://www.youtube.com/embed/pIBdAdnTqqo?controls=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1"></iframe>
				<div class="row">
					<a href="#" id="start-sharing-button" class="button">Start nu met ruilen!</a>
				</div>
			</div>

			<div id="arrow">

			</div>

		</div>
	</section>


	<section id="hoe-werkt-het">
		<div class="container">
			<div class="row">
				<h2>Hoe werkt het?</h2>
			</div>

			<div class="five columns">
				<img src="img/hoe.werkt.het.frame.png" width="262" height="249" alt="Glamourswitch hoe het werkt" style="background-image: url(http://data.whicdn.com/images/29320701/9f89e2a6a6be11e1b00112313800c5e4_7_large.jpg)">
				<h3>Stap 1: lorem ipsum</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis tellus id eros dictum volutpat. 
					Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus.
				</p>
			</div>

			<div class="five columns">
				<img src="img/hoe.werkt.het.frame.png" width="262" height="249" alt="Glamourswitch hoe het werkt" style="background-image: url(http://distilleryimage11.s3.amazonaws.com/870aeca6cb6811e18cf91231380fd29b_7.jpg)">
				<h3>Stap 1: lorem ipsum</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis tellus id eros dictum volutpat. 
					Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus.
				</p>
			</div>

			<div class="five columns">
				<img src="img/hoe.werkt.het.frame.png" width="262" height="249" alt="Glamourswitch hoe het werkt" style="background-image: url(http://farm6.staticflickr.com/5445/7156145856_0ccc3c073b_z.jpg)">
				<h3>Stap 1: lorem ipsum</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis tellus id eros dictum volutpat. 
					Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus.
				</p>
			</div>
		</div>
	</section>


	<section id="over-glamourswitch">
		<div class="container">
			<h2>Over Glamourswitch</h2>
			<div class="seven columns">
				<img src="img/over.glamourswitch.png" alt="Over Glamourswitch">
			</div>
			<h3>Jane Smith</h3>
			<div class="nine columns">
				<p>
					<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis tellus id eros dictum volutpat. 
					Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus accumsan porta.
					</b>
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis tellus id eros dictum volutpat. 
					Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus accumsan porta.
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis tellus id eros dictum volutpat. 
					Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus accumsan porta.
				</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis tellus id eros dictum volutpat. 
					Suspendisse dictum arcu sit amet est varius interdum. Nullam feugiat ipsum venenatis metus accumsan porta.
				</p>
			</div>
		</div>
	</section>


	<footer>
		<div class="container">
			<div class="fourteen columns">
				<p>&copy; Glamourswitch, mogelijk gemaakt door <a href="http://www.studiostart.nl" target="_blank">StudioStart</a></p>
			</div>

			<div class="two columns">
				<a href="/"><img src="img/logo.tiny.png" width="102" height="43" alt="Glamourswitch"></a>
			</div>
		</div>
	</footer>

</body>
</html>